import { useNavigate, useSearchParams } from 'react-router-dom';
import '../css/HomeList.css'
import { ArrowLeft, ShareO } from '@react-vant/icons';
import { useEffect, useState } from 'react';
import http from '../utils/request'

const DoctorZuoPin = () => {

    const navigate = useNavigate();
    const [searchParams] = useSearchParams();
    const [doctorId] = useState(searchParams.get('id'))
    const [doctorDetail, setDoctorDetail] = useState<any>([])
    const getDoctorDetail = () => {
        http.get('/doctor')
            .then((res) => {
                res.data.doctorList.map((item1: any) => {
                    if (item1._id == doctorId) {
                        setDoctorDetail(item1.childrenZuoPin)
                    }
                })
            })
            .catch((err) => {
                console.log(err)
            })
    }
    useEffect(() => {
        getDoctorDetail()
    }, [])

    return (
        <>
            <div className='lunbo-header'>
                <ArrowLeft onClick={() => navigate(`/doctorDetails?id=${doctorId}`)} />
                <h4>全部作品</h4>
                <div>
                    <ShareO />
                </div>
            </div>
            <div className='doctorDetailZuoPinContent'>
                    {
                        doctorDetail.map((item: any, index: any) => {
                            return (
                                <div key={index}>
                                    <img src={ item.childrenSrc } alt={ item.childrenName } />
                                    <p>{ item.childrenName }</p>
                                </div>
                            )  
                        })
                    }
                </div>
        </>
    )
}
export default DoctorZuoPin;